<!doctype>
<html>
<head>
<title></title>
<meta charset="UTF-8" />
<style>
#div1{width:1200px; height:675px; margin:0 auto; background:url("img-original.jpg"); position:relative;}
#topDiv{ position:relative; width:600px; height:675px; background:url("img-modified.jpg");}
#door{width:50px; height:50px; border-radius:25px; background:red;
 position:absolute;left:575px;top:50%; cursor: move;}
span:nth-of-type(1){color:white; position:absolute; left: 20px; bottom:20px;}
span:nth-of-type(2){color:white;position:absolute; right: 20px; bottom:20px;}
</style>
</head>
<body>
<div id="div1">
    <div id="topDiv"></div>
    <div id="door" onmousedown="startMove();" ></div>
    <span>左边文本</span><span>右边文本</span>
</div>
<script>
//获取所有元素对象
	var bgObj = document.getElementById("div1");	
	var btn = document.getElementById("door");
	var imgObj = document.getElementById("topDiv");
	var span1 = document.getElementsByTagName("span")[0];
	var span2 = document.getElementsByTagName("span")[1];
	//得到DIV1距离浏览器左边的距离；
	var bgObjLeft = bgObj.offsetLeft;
	//得到左边SPAN元素右边框的位置
	var spanRightSide = span1.offsetWidth+20+bgObjLeft;
	//得到右边SPAN元素左边框的位置
	var spanLeftSide = span2.offsetLeft+bgObjLeft;
	
function startMove(){
	  btn.style.backgroundColor="gray";
		//给DIV1添加onmousemove,onmouseup事件
		if(document.addEventListener){
			bgObj.addEventListener("mousemove",activeDoor,true);
		}else if(document.attachEvent){
			bgObj.attachEvent("onmousemove",activeDoor);
		}
		if(document.addEventListener){
			bgObj.addEventListener("mouseup",clearMove,true);
		}else if(document.attachEvent){
			bgObj.attachEvent("onmouseup",clearMove);
		}
		//给BTN添加onmouseup事件
		if(document.addEventListener){
			btn.addEventListener("mouseup",clearMove,true);
		}else if(document.attachEvent){
			btn.attachEvent("onmouseup",clearMove);
		}
			
	}
	//------------删除事件函数-----------
function clearMove(){
	 btn.style.backgroundColor="red"; 
		if(document.addEventListener){
        bgObj.removeEventListener("mousemove",activeDoor,true);
    }else if(document.attachEvent){
        bgObj.detachEvent("onmousemove",activeDoor);
    }
	}


function activeDoor(){
	
	var obj = window.event || arguments[0];
	bgObj.style.cursor="move"; 
	var mouseLeft = obj.clientX || window.pageXOffset ;
	//clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。
	console.log("clientX="+mouseLeft)
	if(mouseLeft>spanRightSide-50 && mouseLeft < spanLeftSide+50){
	//实现给老照片DIV的宽度赋值，并且给Door重新定位。
		imgObj.style.width=(mouseLeft-bgObjLeft)+"px";		
		btn.style.left=(mouseLeft-bgObjLeft-25)+"px";
	}
	//以下判断，控制底行文本的隐藏与显示。
	if(mouseLeft-bgObjLeft<=spanRightSide){
		span1.style.opacity=0;
	}else{
	span1.style.opacity=1;
	span1.style.webkitTransition="all 1s";
	}
	if(mouseLeft>=spanLeftSide){
		span2.style.opacity=0;
	}else{
	span2.style.opacity=1;
	span2.style.webkitTransition="all 1s";
	}
	
}
/*
function stopBubble(e) { //阻止事件冒泡。
		if (e && e.stopPropagation) {//非IE浏览器 
		　　e.stopPropagation(); 
		} 
		else {//IE浏览器 
		window.event.cancelBubble = true; 
		} 
	}
	*/
</script>
</body>
</html>